<template>
    <el-drawer v-model="drawer" :size="width" :title="title" :direction="direction" @open="handleOpen"
        @close="handleClose">
        <slot></slot>
    </el-drawer>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue'
const drawer = ref(true);
const props = defineProps({
    title: {
        type: String,
    },
    width: {
        type: String,
        default: '50%'
    },
    showClose: {
        type: Boolean,
        default: false
    },
    direction: {
        type: String,
        default: 'rtl'
    },
    modal: {
        type: Boolean,
        default: true
    }
})
const emit = defineEmits(['open', 'close'])

function handleOpen() {
    emit('open')
}

function handleClose() {
    drawer.value = false;
    emit('close')
}

function closeDrawer() {
    handleClose();
}
window.closeDrawer = closeDrawer
</script>

<style lang="scss" scoped></style>